import React, { useState, useImperativeHandle, forwardRef, useEffect } from 'react';
import TableDataBlock from '@/components/TableDataBlock';
import { Row, Col, Button, Space, Tabs, InputNumber, Popover, Form } from 'antd';
import FormCondition from '@/components/FormCondition';
const SeckilSetting = (props, ref) => {
  const { list = [], disabled } = props
  const [data, setData] = useState({ hasSku: false, renderList: [] })
  const [openForm, setOpenForm] = useState(false)
  const [form] = Form.useForm();
  useEffect(() => {
    if (list.length > 0) {
      const listData = list[0]
      const { goodsSkuList = []
      } = listData
      if (goodsSkuList.length > 0) {
        setData({
          hasSku: true,
          renderList: goodsSkuList.map(item => {
            const { price, stock, propertyDesc, id, secKillPrice, secKillStock
            } = item
            return {
              ...listData,
              price,
              stock,
              propertyDesc,
              secKillPrice,
              secKillStock,
              skuId: id
            }
          })
        })
      }
      else {
        setData({
          hasSku: false,
          renderList: list
        })
      }
    }
    else {
      setData({ hasSku: false, renderList: [] })
    }
  }, [list])
  useImperativeHandle(ref, () => {
    return {
      getSecKillData: () => {
        return data
      }
    }
  })
  const { hasSku, renderList } = data
  const getColumns = [
    {
      title: '规格',
      dataIndex: 'propertyDesc',
    }, {
      title: '原价（元）',
      dataIndex: 'price',
    },
    {
      title: '秒杀价（元）',
      dataIndex: 'secKillPrice',
      render: (e, record) => {
        const { price, skuId, id } = record
        return <InputNumber disabled={disabled} onChange={(o) => onChangeInput(hasSku ? skuId : id, 'secKillPrice', o)} min={0} max={price} value={e}></InputNumber>
      }
    },
    {
      title: '限量（件）',
      dataIndex: 'secKillStock',
      render: (e, record) => {
        const { stock, skuId, id } = record
        return <InputNumber onChange={(o) => onChangeInput(hasSku ? skuId : id, 'secKillStock', o)} disabled={disabled} min={0} max={stock} value={e}></InputNumber>
      }
    },
    {
      title: '现有库存（件）',
      dataIndex: 'stock',
    },]
  const onChangeInput = (id, key, value) => {
    setData({
      ...data,
      renderList: renderList.map(item => {
        if (hasSku) {
          if (item.skuId === id) {
            return {
              ...item,
              [key]: value
            }
          }
          else {
            return item
          }
        }
        else {
          if (item.id === id) {
            return {
              ...item,
              [key]: value
            }
          }
          else {
            return item
          }
        }
      })
    })
  }
  const SetShop = (props) => {
    return <div>
      <FormCondition form={form} formItems={formItems}></FormCondition>
      <div style={{ textAlign: 'right' }}>
        <Button onClick={() => { setOpenForm(false) }} style={{ marginRight: 12 }}>取消</Button>
        <Button type='primary' onClick={() => { BatchSettings() }}>确定</Button>
      </div>
    </div>
  }
  const formItems = [
    {
      label: '秒杀价',
      name: 'secKillPrice',
      type: 'number',
      rules: [{ required: false }],
    },
    {
      label: '限量',
      type: 'number',
      name: 'secKillStock',
      rules: [{ required: false }],
    },
  ];
  const BatchSettings = () => {
    form.validateFields().then(async (values) => {
      let batchList = Object.keys(values).filter(item => {
        return values[item]
      })
      let obj = {}
      batchList.forEach(item => {
        obj[item] = values[item]
      })
      setOpenForm(() => {
        setData({
          ...data,
          renderList: renderList.map(item => {
            return {
              ...item,
              ...obj
            }
          })
        })
        return false
      })
    });
  }
  return (
    <Row style={{ marginBottom: 24 }}>
      <Col style={{ textAlign: 'right' }} span={6}>
        秒杀商品 :
      </Col>

      <Col span={18}>
        <TableDataBlock
          columns={getColumns.filter(item => {
            if (!hasSku) { return item.dataIndex !== 'propertyDesc' }
            else {
              return true
            }
          })}
          rowKey={(record) => hasSku ? `${record.skuId}` : `${record.id}`}
          list={renderList}
        ></TableDataBlock>
      </Col>

      {!disabled && <Col span={18} offset={6}>
        <Popover placement="bottom" content={<SetShop></SetShop>} open={openForm}>
          <Button type='link' onClick={() => setOpenForm(true)}>批量设置</Button>
        </Popover></Col>}
    </Row>
  )
}
export default forwardRef(SeckilSetting)